// 连接socket服务器
var socket = io.connect('http://127.0.0.1:5000')
// var socket = io.connect('ws://127.0.0.1:5000');

var message = document.getElementById('message'),
  user = document.getElementById('username'),
  btn = document.getElementById('send'),
  output = document.getElementById('output'),
  feedback = document.getElementById('feedback')

btn.addEventListener('click', function () {
  if (!message.value.trim()) {
    alert('内容不能为空')
    return
  }
  // 发送聊天事件
  socket.emit('chat', {
    message: message.value,
    username: user.value,
  })
  message.value = ''
})

message.addEventListener('keyup', function (event) {
  // 触发键入文字的事件
  socket.emit('typing', user.value)
  if (!message.value.trim()) {
    alert('内容不能为空')
    return
  }
  // 回车键发布
  if (event.keyCode === 13) {
    // 发送聊天事件
    socket.emit('chat', {
      message: message.value,
      username: user.value,
    })
    message.value = ''
  }
})

// 监听服务端返来的chat事件
socket.on('chat', function (data) {
  feedback.innerHTML = ''
  output.innerHTML +=
    '<p><strong>' + data.username + ': </strong>' + data.message + '</p>'
})

// 监听服务器的typing事件
socket.on('typing', function (username) {
  console.log('client typing ' + username)
  feedback.innerHTML = '<p>' + username + ' 正在输入...</p>'
})
